<template>
	<view style="width: 100%;">
		<!-- <view :style="{lineHeight: 1.5,color: valueName?'':'#c0c4cc'}" @click="showPicker">{{ valueName?valueName:placeholder }}</view> -->
		<u--input v-model="valueName" @click.native="showPicker" disabled disabledColor="#ffffff" placeholder="请选择" border="none" />
		<!-- 下拉列表 -->
		<u-picker 
			:columns="list"
			:defaultIndex="defaultIndex"
			:show="pickerShow" 
			:closeOnClickOverlay="true" 
			@cancel="pickerShow = false"
			@confirm="chooseItem"
			:keyName="rangeKey"
			@close="pickerShow = false"
		></u-picker>
	</view>
</template>
<script>
	import {
		queryDictModelByCode
	} from '../../api/index.js'

	export default {
		name: 'HPickerList',
		data() {
			return {
				pickerShow: false, //picker选择器状态
				valueName: '', //所选id 值参数
				list: [],
				defaultIndex: [0]
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: { //id
				type: [String, Number],
				default: '',
				required: true
			},
			rangeKey: { //显示key
				type: String,
				default: 'text',
			},
			dictName: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			}
		},
		watch: {
			value(newData) {
				//处理数据
				this.emervalue(newData);
			},
		},
		methods: {
			//点击展示
			showPicker() {
				if (this.disabled) return;
				this.pickerShow = true;
			},
			chooseItem(val) {
				this.pickerShow = false
				const _select = val.value[0];
				this.valueName = _select[this.rangeKey];
				this.$emit('change', _select.value)
			},
			//枚举差值
			emervalue(val) {
				if (this.list[0].length > 0 && val != '') {
					//处理数据
					for (let i = 0; i < this.list[0].length; i++) {
						if ((this.list[0][i].id && this.list[0][i].id == val) || (this.list[0][i].value && this.list[0][i].value ==
								val)) {
							this.valueName = this.list[0][i][this.rangeKey];
							this.defaultIndex = [i]
							break;
						}
					}
				}
			},
			//字典
			queryDictModelByCodes(name) {
				const params = {
					dictCode: name,
				}
				queryDictModelByCode(params).then(res => {
					if (res.success) {
						this.list = [res.result] || [];
						this.emervalue(this.value)
					}
				})
			},
		},
		mounted() {
			//初始化数据
			this.queryDictModelByCodes(this.dictName);
		}
	}
</script>
